import { Component, createContext } from 'react'
import ReactDOM from 'react-dom'
const { Provider, Consumer } = createContext()
class Sun extends Component {
  render() {
    return (
      <Consumer>
        {(value) => (
          <div>
            <h3>sun组件--------money:{value.money}</h3>
            <div>
              <button onClick={() => value.buy(100)}>买皮肤</button>
            </div>
          </div>
        )}
      </Consumer>
    )
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2>Son组件</h2>
        <Sun></Sun>
      </div>
    )
  }
}

class App extends Component {
  state = {
    money: 1000,
  }
  render() {
    return (
      <Provider value={{ money: this.state.money, buy: this.buy }}>
        <div>
          <h1>父组件</h1>
          <Son></Son>
        </div>
      </Provider>
    )
  }
  buy = (val) => {
    this.setState({
      money: this.state.money - val,
    })
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'))
